<template>
  <div class="container">
    发起认证申请{{ }}
    <el-form ref="ruleFormRef" :rules="rules" :model="formData"
      style="background-color: white;border-radius: 5px;margin-top: 12px;padding: 12px;">
      <div class="form">
        <div class="formtitle">基础信息</div>
        <div class="formcontent">
          <el-form-item label="申请单位" prop="applicant">
            <el-input v-model="formData.applicant" placeholder="申请单位" clearable />
          </el-form-item>
          <el-form-item label="申请日期" prop="applicantDate">
            <el-date-picker v-model="formData.applicantDate" type="date" placeholder="申请日期" :size="size" />
          </el-form-item>
          <el-form-item label="申请单位名称" prop="applicantName">
            <el-input v-model="formData.applicantName" placeholder="申请单位名称" clearable />
          </el-form-item>
          <el-form-item label="负责人" prop="director">
            <el-input v-model="formData.director" placeholder="负责人" clearable />
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input v-model="formData.address" placeholder="地址" clearable />
          </el-form-item>
          <el-form-item label="邮编" prop="postalCode">
            <el-input v-model="formData.postalCode" placeholder="邮编" clearable />
          </el-form-item>
          <el-form-item label="联系人" prop="contact">
            <el-input v-model="formData.contact" placeholder="联系人" clearable />
          </el-form-item>
          <el-form-item label="联系电话" prop="contactNumber">
            <el-input v-model="formData.contactNumber" placeholder="联系电话" clearable />
          </el-form-item>
          <el-form-item label="电子邮件" prop="mail">
            <el-input v-model="formData.mail" placeholder="电子邮件" clearable />
          </el-form-item>
          <el-form-item label="传真" prop="fax">
            <el-input v-model="formData.fax" placeholder="传真" clearable />
          </el-form-item>
        </div>
      </div>
      <div style="width: 100%;">
        <div class="formtitle">材料信息</div>
        <div class="box">
          <div>创建区域基本情况:</div>
          <el-form-item prop="basicInformation">
            <el-input v-model="formData.basicInformation" maxlength="300" style="width: 70%; margin: 12px 0"
              placeholder="请输入" show-word-limit rows="4" type="textarea" />
          </el-form-item>
        </div>
        <div class="box">
          <div>创建区域内诚信计量工作基本情况:</div>
          <el-form-item prop="workSituation">
            <el-input v-model="formData.workSituation" maxlength="300" style="width: 70%; margin: 12px 0"
              placeholder="请输入" show-word-limit rows="4" type="textarea" />
          </el-form-item>
          <el-upload v-model:file-list="fileList" class="upload-demo"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple :on-preview="handlePreview"
            :on-remove="handleRemove" :before-remove="beforeRemove" :limit="3" :on-exceed="handleExceed">
            <el-button type="primary">上传附件</el-button>
          </el-upload>
        </div>
        <div class="box">
          <div>创建工作计划:</div>
          <el-form-item prop="workPlan">
            <el-input v-model="formData.workPlan" maxlength="300" style="width: 70%; margin: 12px 0" placeholder="请输入"
              show-word-limit rows="4" type="textarea" />
          </el-form-item>
          <el-upload v-model:file-list="fileList" class="upload-demo"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple :on-preview="handlePreview"
            :on-remove="handleRemove" :before-remove="beforeRemove" :limit="3" :on-exceed="handleExceed">
            <el-button type="primary">上传附件</el-button>
          </el-upload>
        </div>
        <div class="box">
          <div>组织单位及职责分工:</div>
          <el-form-item prop="responsibilities">
            <el-input v-model="formData.responsibilities" maxlength="300" style="width: 70%; margin: 12px 0"
              placeholder="请输入" show-word-limit rows="4" type="textarea" />
          </el-form-item>
        </div>
        <div class="button">
          <el-button @click="">取消</el-button>
          <el-button type="primary" @click="submit">
            提交
          </el-button>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script name="list-two" setup>
import { formatDate } from '@/utils/tool';
import { submitRzsq, addWorkFlow, getOpinion, getWorkFlow, saveCompleteWork } from '@/api/rzsq'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from "vue-router";
import { queryRzsqList } from '@/api/rzsq'

const router = useRouter();
const ruleFormRef = ref(null)

const formData = reactive({})
let userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
const submit = () => {
  formData.applicantDate = formatDate(formData.applicantDate)
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      let flowParams = { deptId: userInfo.deptId, deptName: userInfo.deptName, flowId: "00000029", flowVersion: "1.00", instName: "22", organId: userInfo.organId, organName: userInfo.organName, userId: userInfo.userId, userName: userInfo.userName }
      addWorkFlow(flowParams).then(data => {
        let params = { flowUuid: data }
        let outer = data
        getOpinion(params).then((opinion) => {
          flowParams.activityUuid = opinion.uuid
          flowParams.flowUuid = "a35c6e83-046a-4b46-8b33-2c5b7b4e9769"
          flowParams.operationId = "00290101"
          flowParams.opIds = 1
          saveCompleteWork(flowParams).then(res1 => {
            formData.activityUuid = opinion.uuid
            formData.flowUUid = outer
            formData.activityId = opinion.activityId
            submitRzsq(formData).then(res => {
              if (res.code == "0") {
                ElMessage({
                  message: '新增成功',
                  type: 'success',
                })
                router.push({ path: "/rzsq/shenbao" });
              }
            })
          })
        })
      })
    } else {
      return false;
    }
  })
}
function getWorkFlowById() {
  getWorkFlow({ id: '00000029' })
}
let requiredRule = { required: true, message: '必填', trigger: 'blur' }
const rules = reactive({
  applicant: [
    { required: true, message: '必填', trigger: 'blur' },
  ],
  applicantDate: [
    { required: true, message: '必填', trigger: 'blur' },
  ],
  applicantName: [
    requiredRule
  ], director: [
    requiredRule
  ], address: [
    requiredRule
  ], postalCode: [
    requiredRule
  ], contact: [
    requiredRule
  ], contactNumber: [
    requiredRule
  ], mail: [
    requiredRule
  ], fax: [
    requiredRule
  ], responsibilities: [requiredRule], workPlan: [requiredRule], basicInformation: [requiredRule], workSituation: [requiredRule],
})
</script>
<style lang="scss" scoped>
.container {
  background-color: white;

  .form {}
}

.formtitle {
  color: #4688f6;
  padding-bottom: 2px;
  border-bottom: 1px solid #4688f6;
}

.box {
  margin-top: 12px;
  font-size: 14px;

  .detail_content {
    font-weight: 100;
    padding: 12px;
  }
}

::v-deep .fc-form-item {
  margin-top: 12px !important;
}


.button {
  display: flex;
  justify-content: center;
}

.formcontent {
  display: flex;
  flex-wrap: wrap;
  background-color: white;
  margin-top: 12px;

  ::v-deep .el-form-item__label {
    width: 7rem !important;
    font-size: 14px;
  }

  ::v-deep .el-form-item {
    width: 23%;
    margin-right: 12px;
  }
}
</style>
